<template>
    <div class="fixed-center flex-col">
        <jb-icon :local-icon="logo" class="text-140px"></jb-icon>
        <div class="w-56px h-56px my-36px">
            <div class="relative h-full animate-spin">
                <div
                    v-for="(item, index) in loadingClasses"
                    :key="index"
                    class="absolute w-16px h-16px bg-primary rounded-8px animate-pulse"
                    :class="item"
                ></div>
            </div>
        </div>
        <h2 class="text-28px font-500 text-#646464">{{ appName }}</h2>
    </div>
</template>

<script setup lang="ts">
import { getRgbOfColor, sessionStg } from '@/utils'
import themeSettings from '@/settings/theme.json'

const appName = import.meta.env.VITE_APP_NAME
const logo = import.meta.env.VITE_APP_LOGO
console.debug('在这里编辑进入系统前的加载动画')
const loadingClasses = [
    'left-0 top-0',
    'left-0 bottom-0 animate-delay-500',
    'right-0 top-0 animate-delay-1000',
    'right-0 bottom-0 animate-delay-1500'
]

function addThemeColorCssVars() {
    const defaultColor = themeSettings.themeColor
    const themeColor: string = sessionStg.get('themeColor') || defaultColor

    const { r, g, b } = getRgbOfColor(themeColor)

    const cssVars = `--primary-color: ${r},${g},${b}`
    document.documentElement.style.cssText = cssVars
}

addThemeColorCssVars()
</script>

<style scoped></style>
